<template>
	<view class="ocrImgContainer">
		<!-- 摄像头组件 -->
		<view class="cameraBls">
			<camera id="myCamera" :device-position="devicePosition" :style="styleType[styleTypeIndex]">
			</camera>
			<view class="mos" :style="styleType[styleTypeIndex]">我是蒙层</view>
		</view>
		<image :src="imgUrl" style="margin: 24rpx; 0" mode="aspectFit"></image>
		<!-- 比例 -->
		<view class="bil">
			<view class="bliItem" @click="styleTypeIndex = 0">正方形</view>
			<view class="bliItem" @click="styleTypeIndex = 1">长方形</view>
			<view class="bliItem" @click="overturn">翻转</view>
		</view>
		<!-- 按钮 -->
		<view class="bot">
			<u-button type="primary" text="拍照" @click="pic"></u-button>
		</view>
	</view>
</template>

<script>
	let cameraContext = null;
	export default {
		data() {
			return {
				devicePosition: 'back',
				imgUrl: '',
				styleType: ['width: 300px;height: 300px;', 'width: 100%;height: 300px;'],
				styleTypeIndex: 1
			};
		},
		onReady() {
			cameraContext = wx.createCameraContext();
		},
		methods: {
			overturn() {
				this.devicePosition = this.devicePosition === 'back' ? 'front' : 'back'
			},
			pic() {
				cameraContext.takePhoto({
					quality: "high",
					success: (res) => {
						this.imgUrl = res.tempImagePath;
					},
				});
			}
		},
	}
</script>

<style lang="less" scoped>
	.ocrImgContainer {
		width: 100%;
		min-height: 100vh;
		padding: 24rpx;

		.cameraBls {
			position: relative;

			.mos {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, .5);
				z-index: 999;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 32rpx;
			}
		}

		.bil {
			display: flex;

			.bliItem {
				width: 100rpx;
				height: 100rpx;
				background-color: #007AFF;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				margin: 0 20rpx;
			}
		}

		// 固定底部
		.bot {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			z-index: 999;
			padding: 0 20rpx;
			padding-bottom: 60rpx;
		}
	}
</style>